
{% extends 'base/front_base.html' %}
{% load news_filters %}

{% block title %}
小饭桌
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/news/index.min.css' %}">
    <script src="{% static 'arttemplate/template-web.js' %}"></script>
    <script src="{% static 'js/index.min.js' %}"></script>
<script id="news-item" type="text/html">
{% verbatim %}
    {{ each newses news index }}
        <li>
            <a href="/news/{{ news.id }}/">
                <div class="thumbnail-group">
                    <img src="{{ news.thumbnail }}" alt="">
                </div>
                <div class="news-group">
                    <p class="title">{{ news.title }}</p>
                    <p class="desc">{{ news.desc }}</p>
                    <div class="more">
                        <div class="left-more">
                            <span>{{ news.category.name }}</span>
                        </div>
                        <div class="right-more">
                            <span class="author">{{ news.author.username }}</span>
                            <span class="pub-time">{{ news.pub_time|timeSince }}</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
    {{ /each }}
{% endverbatim %}
</script>
{% endblock %}

{% block main %}
<div class="main">
    <div class="wrapper">
        <div class="main-content-wrapper">
            <div class="banner-group" id="banner-group">
                <!--左箭头-->
                <span class="arrow left-arrow">‹</span>
                <!--右箭头-->
                <span class="arrow right-arrow">›</span>
                <!--轮播图-->
               <ul class="banner-ul" id="banner-ul">
                   {% for banner in banners %}
                       <li>
                           <a href="{{ banner.link_to }}"><img src="{{ banner.image_url }}" alt=""></a>
                       </li>
                   {% endfor %}
               </ul>
                <!--小圆点-->
                <div class="page-control-group">
                    <ul class="page-control">
                    </ul>
                </div>
            </div>
            <ul class="recommend-news">
                <li>
                    <a href="#">
                        <div class="photo">
                            <img src="https://static-image.xfz.cn/1543557975_836.jpg-website.news.list" alt="">
                        </div>
                        <div class="info">快递，兄弟，无江湖</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="photo">
                            <img src="https://static-image.xfz.cn/1543474471_332.jpg-website.news.list" alt="">
                        </div>
                        <div class="info">孙东升复盘深创投20年：穿越至暗，投出142家上市公司</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="photo">
                            <img src="https://static-image.xfz.cn/1543463199_195.jpg-website.news.list" alt="">
                        </div>
                        <div class="info">阿里变阵风云录</div>
                    </a>
                </li>
            </ul>
            <div class="list-outer-group">
                <ul class="list-tab">
                    <li class="active" data-category="0">
                        <a href="javascript:void(0);">最新资讯</a>
                    </li>
                    {% for category in categories %}
                        <li data-category="{{ category.pk }}">
                        <a href="javascript:void(0)">{{ category.name }}</a>
                    </li>
                    {% endfor %}

                </ul>
            </div>
            <ul class="list-inner-group">
                {% for news in newses %}
                    <li>
                        <a href="{% url 'news:news_detail' news_id=news.pk %}">
                            <div class="thumbnail-group">
                                <img src="{{ news.thumbnail }}" alt="">
                            </div>
                            <div class="news-group">
                                <p class="title">{{ news.title }}</p>
                                <p class="desc">{{ news.desc }}</p>
                                <div class="more">
                                    <div class="left-more">
                                        <span>{{ news.category.name }}</span>
                                    </div>
                                    <div class="right-more">
                                        <span class="author">{{ news.author.username }}</span>
                                        <span class="pub-time">{{ news.pub_time|time_since }}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <div class="load-more-group">
                <button class="load-more-btn">查看更多</button>
            </div>
        </div>
        {% include 'base/sidebar.html' %}
    </div>
</div>
{% endblock %}

